<!--首页-->
<template>
    <div class="m-chat flex-column">
        <app-header @closeAll="toFirstPage"></app-header>
        <div class="m-scroll"
             ref="scrollParent"
             @touchstart="touchStart($event)"
             @touchmove="touchMove($event)"
             @touchend="touchEnd($event)"
        >
            <div class="m-loadMoreChat" ref="loading">
                <img src="./../images/loading.svg">
            </div>

            <div class="content"
                 :style="{ transform: 'translate3d(0px, ' + scrollLoadInfo.scrollOffsetTop + 'px, 0px) scale(1)' }"
            >
                <div class="m-lastChat">
                    <div class="layout-1"></div>
                    <div class="layout-2">上次聊到了这里</div>
                    <div class="layout-3"></div>
                </div>
                <div class="m-time">
                    <div class="layout-1">12:35</div>
                </div>

                <div class="m-row left">
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">领1000美元交易奖励，抢占白银优惠先机！仅限本月，<a href="javascript:void(0)">马上开户领取>></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-row left">
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">Hi，我是客服小秘书，请用一句话描述下您的问题，如取款多久可以到账？</div>
                        </div>
                    </div>
                </div>
                <div class="m-row right">
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">取款多久可以到账?</div>
                        </div>
                    </div>
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                </div>
                <div class="m-row left">
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">银行卡已被扣款，但显示充值失败。<br/>1.XXXXXXXXXXX2.XXXXXXXX<br/>3.XXXXXXXXXXXXXX<br/>
                                您可能想问：<br/>取款多久可以到账？
                            </div>
                            <div class="item-2 border-top-1px">
                                <div @click="useful(1)">有用</div><div @click="useful(0)">没用</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="m-words">没有解决您的问题？试试找<a href="javascript:void(0)" @click="linkArtificial">在线客服MM.</a></div>

                <div class="m-words">正在为您接入人工客服，请稍等片刻...</div>

                <div class="m-row left">
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">您好，我是在线客服Bella，工号567，请问有什么可以帮助您的？</div>
                        </div>
                    </div>
                </div>
                <div class="m-row right">
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1" @click="showBigImg">
                                <img src="./../images/img@2x.png">
                            </div>
                        </div>
                        <i class="uploadError icon-notification"></i>
                    </div>
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                </div>
                <div class="m-row right">
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1" @click="showBigImg">
                                <img data-src="http://pro.baidu.com/topic/xiaotu/xiaoAzhitou.jpeg">
                            </div>
                        </div>
                        <i class="uploading icon-spinner2"></i>
                    </div>
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                </div>
                <div class="m-row left">
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-3">
                                <div class="wenzi border-bottom-1px">您好，请给客服Bella进行打分，感谢您的支持：</div>
                                <label class="border-bottom-1px radio"><input :disabled="serviceNoInput"
                                                                              @change="serviceScore(2)" name="service"
                                                                              type="radio"
                                                                              value="2"/><i></i><span>非常满意</span></label>
                                <label class="border-bottom-1px radio"><input :disabled="serviceNoInput"
                                                                              @change="serviceScore(1)" name="service"
                                                                              type="radio"
                                                                              value="1"/><i></i><span>满意</span></label>
                                <label class="border-bottom-1px radio"><input :disabled="serviceNoInput"
                                                                              @change="serviceScore(0)" name="service"
                                                                              type="radio"
                                                                              value="0"/><i></i><span>不满意</span></label>
                                <div class="wenzi">客服小秘书将继续为您服务哦～</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-row right" v-for="item in chatList.showChatList">
                    <div class="m-chatWords">
                        <i class="triangle"></i>
                        <div class="layout-1">
                            <div class="item-1">{{item}}</div>
                        </div>
                    </div>
                    <div class="m-headPic">
                        <img src="./../images/img@2x.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="m-input flex-row align-items">
            <div class="item-1">
                <label>
                    <input type="file" accept="image/*" @change="inputImg">
                    <i class="icon-kf_chat_add"></i>
                </label>
            </div>
            <div class="item-2 flex-item">
                <textarea v-model.trim="pushWords"></textarea>
                <div class="push" @click="pushInput">
                    <i :class="{'icon-kf_chat_send_focus': pushWords.length > 0 ,'icon-kf_chat_send': pushWords.length <= 0}"></i>
                </div>
            </div>
        </div>
        <div class="m-image flex-column align-items" v-show="showBigIMG" @click.stop=" showBigIMG = false ">
            <div class="img" :style="{'margin-top' : imgMarginTop + 'px'}">
                <img ref='bigIMG' src="./../images/img@2x.png">
            </div>
        </div>
    </div>
</template>

<script>
    import AppHeader from "@/components/header.vue";
    import axios from 'axios';
    import ImageCompressor from "mlib/util/image-compressor.esm";
    export default {
        name: 'chat',
        components: {AppHeader},
        data() {
            return {
                timer: 0,//定时器
                pushWords: '',
                inputFile: '',
                showBigIMG: false,
                serviceNoInput: false,
                imgMarginTop: 0,
                chatList: {
                    preChatList: [],//旧的隐藏的记录
                    showChatList: [],//显示的聊天记录
                    newChatList: [],//新的隐藏的记录
                },
                scrollLoadInfo :{
                    loadingHeight: 0,
                    scrollOffsetTop: 0,
                    startY: 0,
                    scrollY:0
                }
            };
        },
        created() {
            localStorage.setItem("kfzxShowBackBtn", false);
            for (let a = 0; a < 0; a++) {
                this.chatList.showChatList.push(a)
            }
        },
        mounted() {
            this.timer = setInterval(() => {
                this.toggleShowImg(1);
            }, 150);
            this.loadingHeight = this.$refs.loading.offsetHeight;
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
        methods: {
            toFirstPage(){
                this.$emit("closeAll")
            },
            toggleShowImg(type) {
                let imgArr = this.$refs.scrollParent.querySelectorAll(".m-chatWords img");
                if (imgArr) {
                    imgArr = Array.prototype.slice.call(imgArr);
                    imgArr.map((item) => {
                        let rect = item.getBoundingClientRect();
                        let isInviewport = (
                            rect.top <= -150 ||
                            rect.bottom > (window.innerHeight || document.documentElement.clientHeight) + 150
                        );
                        if (!isInviewport && item.getAttribute('data-src') && type === 1) {
                            item.setAttribute("src", item.getAttribute('data-src'));
                            item.removeAttribute("data-src");
                            return;
                        }
                        if (isInviewport && item.getAttribute('src') && type === 0) {
                            item.setAttribute("data-src", item.getAttribute('rrc'));
                            item.removeAttribute("src");
                            return;
                        }
                    })
                }
            },
            inputImg(ev){
                let _file = ev.target.files[0];
                if (!_file) {
                    return;
                }
                if (_file.type != 'image/png' || _file.type != 'image/jpeg' || _file.type != 'image/svg+xml' || _file.type != 'image/gif') {
                    $toast.show('输入图片文件不合法，请重新选择！', 700);
                    return;
                }
                new ImageCompressor(_file, {
                    success: (res) => {
                        this.toggleShowImg(0);
                        this.getObjectURL(res);  //从Blob获取图片的地址
                        const formData = new FormData();
                        formData.append('file', res);   //实例化一个上传数据对象承载图片
                    },
                    error(e) {
                        $toast.show(e.message);
                    },
                });
            },
            pushInput() {
                if (!this.pushWords) {
                    return;
                }
                this.chatList.showChatList.push(this.pushWords);
                this.pushWords = '';

            },
            getObjectURL(file) {
                let url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            },
            showBigImg(url) {
                let scNumber = this.$refs.bigIMG.width / document.body.clientWidth;
                this.imgMarginTop = (document.body.clientHeight - (this.$refs.bigIMG.height / scNumber)) / 2;
                this.showBigIMG = true;
            },
            useful(num) {
                //有用---没用
                console.log(num);
            },
            serviceScore(num) {
                //服务评分
                this.serviceNoInput = true;
            },
            linkArtificial() {
                //链接人工客服
                console.log('链接人工客服')
            },
            touchStart(ev) {
                this.scrollLoadInfo.startY = ev.touches[0].pageY;
            },
            touchEnd(ev) {
                if(this.$refs.scrollParent.scrollTop == 0 && this.scrollLoadInfo.scrollY >= this.loadingHeight-15) {
                    this.scrollLoadInfo.scrollOffsetTop = this.loadingHeight;
                } else {
                    this.scrollLoadInfo.scrollOffsetTop = 0;
                }
            },
            touchMove(ev){
                this.scrollLoadInfo.scrollY = (ev.touches[0].pageY - this.scrollLoadInfo.startY)/3;
                if(this.$refs.scrollParent.scrollTop == 0 && this.scrollLoadInfo.scrollY > 0) {
                    ev.preventDefault();
                    if(this.scrollLoadInfo.scrollY >=0 && this.scrollLoadInfo.scrollY < this.loadingHeight) {
                        this.scrollLoadInfo.scrollOffsetTop = this.scrollLoadInfo.scrollY;
                    }
                }
            }
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    @import "./../scss/variables";
    @import "./../scss/mixin";

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .m-scroll {
        position: relative;
        background-color: $bg-colorC;
        //transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 50, 0, 1);
        .content {
            position: absolute;
            background-color: $bg-colorC;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 6;
            transform-origin: left top;
            transform: translateZ(0);
            padding: 0 px2rem(32) px2rem(40) px2rem(32);
            -webkit-overflow-scrolling: touch;
        }
    }

    .m-loadMoreChat {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        width: 100%;
        height: px2rem(146);
        text-align: center;
        padding: px2rem(20) 0;
        img {
            width: px2rem(100);
        }
    }

    .m-chat {
        height: 100%;
        overflow-y: scroll;
        .m-row {
            margin-top: px2rem(60);
            > div {
                vertical-align: top;
            }
        }
    }

    .m-chatWords {
        position: relative;
        display: inline-block;
        width: px2rem(510);
        .triangle {
            position: absolute;
            z-index: 11;
            top: px2rem(20);
            width: px2rem(17);
            height: px2rem(30);
            background-size: px2rem(17) px2rem(30);
        }
        .layout-1 {
            display: inline-block;
            max-width: px2rem(502);
            font-size: px2rem(30);
            border-radius: px2rem(9);
            line-height: px2rem(40);
            word-break: break-all;
            a {
                border-bottom: solid 1px $f-colorF;
                color: $f-colorF;
            }
            .item-1 {
                padding-top: px2rem(15);
                padding-bottom: px2rem(15);
                img {
                    max-width: 100%;
                    height: auto;
                    border-radius: px2rem(5);
                    &[data-src] {
                        height: px2rem(80);
                    }
                }
            }
            .item-2 {
                text-align: center;
                padding: px2rem(14) 0;
                div {
                    position: relative;
                    line-height: px2rem(45);
                    width: 50%;
                    display: inline-block;
                    &:nth-child(1) {
                        @include border-1px($bl-colorA, right, solid, 0);
                    }
                }
            }
            .item-3 {
                padding: px2rem(15) 0;
                .wenzi {
                    padding: px2rem(15) px2rem(34);
                }
                .radio {
                    position: relative;
                    display: block;
                    padding: px2rem(28) px2rem(34);
                    span {
                        margin-left: px2rem(20);
                    }
                    i {
                        position: relative;
                        z-index: 50;
                        top: px2rem(8);
                        display: inline-block;
                        width: px2rem(40);
                        height: px2rem(40);
                        @include border-1px($bl-colorE, all, solid, 50%);
                        border-radius: 50%;
                    }
                }
                input {
                    visibility: hidden;
                    &:checked + i {
                        @include border-1px($f-colorE, all, solid, 50%);
                        &:after {
                            content: '';
                            position: absolute;
                            top: px2rem(13);
                            left: px2rem(13);
                            width: px2rem(15);
                            height: px2rem(15);
                            background-color: $f-colorE;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }

    }

    .left {
        .m-chatWords {
            margin-left: px2rem(19);
            .triangle {
                left: px2rem(-7);
                background-image: url("./../images/triangle_white.png");
            }
            .layout-1 {
                background-color: $bg-colorB;
                color: $f-colorA;
                margin-left: px2rem(8);
                box-shadow: inset 0 0 1px rgba(0, 0, 0, .45);
                //@include border-1px($bl-colorE, all, solid, px2rem(8));
            }
            .item-1 {
                padding-right: px2rem(34);
                padding-left: px2rem(41);
            }
        }
    }

    .right {
        text-align: right;
        .m-chatWords {
            margin-right: px2rem(19);
            .triangle {
                right: px2rem(-15);
                background-image: url("./../images/triangle_blue.png");
            }
            .layout-1 {
                text-align: left;
                background-color: $bg-colorD;
                color: $f-colorD;
            }
            .item-1 {
                padding-left: px2rem(34);
                padding-right: px2rem(41);
            }
            .uploading {
                animation: rotate infinite 2s ease both;
                position: absolute;
                left: px2rem(-25);
                top: 50%;
            }
            .uploadError {
                position: absolute;
                left: px2rem(-25);
                top: 50%;
                color: #FF0F1E;
            }
        }
    }

    .m-time {
        text-align: center;
        margin-top: px2rem(47);
        .layout-1 {
            display: inline-block;
            line-height: px2rem(36);
            padding: 0 px2rem(20);
            font-size: px2rem(24);
            color: $f-colorD;
            background-color: $bg-colorG;
            border-radius: px2rem(8);
            overflow: hidden;
        }
    }

    .m-words {
        text-align: center;
        margin-top: px2rem(38);
        font-size: px2rem(24);
        color: $f-colorA;
        line-height: px2rem(36);
        a {
            border-bottom: solid 1px $f-colorE;
            color: $f-colorE;
        }
    }

    .m-lastChat {
        text-align: center;
        margin-top: px2rem(47);
        font-size: px2rem(24);
        color: $f-colorB;
        line-height: px2rem(36);
        > div {
            display: inline-block;
            vertical-align: middle;
        }
        .layout-1, .layout-3 {
            width: px2rem(80);
            height: px2rem(3);
        }
        .layout-2 {
            padding: 0 px2rem(5);
        }
        .layout-1 {
            background-image: linear-gradient(90deg, rgba(207, 211, 219, 0.00) 0%, #A2A8B4 100%);
        }
        .layout-3 {
            background-image: linear-gradient(-90deg, rgba(207, 211, 219, 0.00) 0%, #A2A8B4 100%);
        }
    }

    .m-headPic {
        display: inline-block;
        width: px2rem(71);
        height: px2rem(71);
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .m-input {
        height: px2rem(100);
        padding: px2rem(13) px2rem(36);
        background-color: $bg-colorA;
        .item-1 {
            position: relative;
            width: px2rem(52);
            height: px2rem(52);
            label {
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            i {
                position: relative;
                font-size: px2rem(56);
                top: 0;
                left: px2rem(-2);
            }
            input {
                position: absolute;
                top: 0;
                left: px2rem(-35);
                z-index: 9;
                display: inline-block;
                width: 1px;
                height: 1px;
                opacity: 0;
            }
        }
        .item-2 {
            position: relative;
            border-radius: px2rem(200);
            @include border-1px($bl-colorD, all, solid, px2rem(200));
            height: 100%;
            background-color: $bg-colorB;
            padding: px2rem(20) px2rem(82) 0 px2rem(30);
            margin-left: px2rem(32);
            .push {
                position: absolute;
                top: px2rem(8);
                right: px2rem(10);
                width: px2rem(52);
                height: px2rem(52);
                display: inline-block;
                i {
                    font-size: px2rem(56);
                }
            }
        }
        textarea {
            position: relative;
            top: px2rem(-10);
            border: none;
            outline: medium;
            background-color: transparent;
            word-break: break-all;
            width: 100%;
            height: 100%;
            font-size: px2rem(30);
            color: $f-colorA;
            resize: none;
        }
    }

    .m-image {
        position: fixed;
        background-color: rgba(0, 0, 0, .1);
        overflow: hidden;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img {
            width: 100%;
            height: auto;
        }
    }
</style>

